<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="../css/setting.css"/>
</head>
<body class="white">
	<div class="mui-content" >
		<div class="headertop">
			<div class="headimg">
				<img src="../icon/mask-min.png" alt="" />
				<p></p>
			</div>
		</div>
		<div class="forms">
			<p>亲,请绑定你的手机号码</p>
		    	<div class="inputBox">
		    		<input type="number" name="" placeholder="请输入您的手机号" class="phoneIcon" />
		    	</div>
		    	<div class="inputBox vercode mui-clearfix">
		    		<input type="number" name="" class="codes" placeholder="验证码" />
		    		<button type="button" class="bexta-btn bexta-btn-red mui-btn getCode" data-loading-text="获取中">获取验证码</button>
		    	</div>
		    	<div class="inputBox pwdbox">
		    		<input type="password" name=""  placeholder="" class="pwdIcon1" />
		    	</div>
	    </div>	 
	    <div class="mui-content-padded" style="margin-top: 20px;">
	   		<button type="button" class="bexta-btn bexta-btn-red mui-btn mui-btn-block " id="register"  >绑定</button>
	   </div>
	</div>
<script src="../js/mui.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var views, user;
	mui.plusReady(function () {
	    views = bexta.getWebview();
	   user = views.user;
	   document.querySelector('.headimg img').src = user.userInfo.headimgurl;
	   document.querySelector('.headimg p').innerHTML = user.userInfo.nickname;
	   
	   var phone = document.querySelector('.phoneIcon'),	
	   		code = document.querySelector('.codes'),
	   		pwd = document.querySelector('.pwdIcon1');
	   function ot(fb){
			bexta.countDown(90, function(m){
				if( m <=1  ){
					fb.reset();
				}else{
					fb.setText(m + '秒');
				}
			});
	   }
	   var pwdbox = false;
	   document.querySelector('.getCode').addEventListener('tap', function(){
			if( check.phone(phone.value) ){
				var f = mui('.getCode').button('loading');
				bexta.ajax(api.send_msg, function(res){
					if( res.isError == 1 ){
						mui.	confirm("是否绑定", res.msg, CONFIRM, function(item){
							if( item.index == 1 ){
								bexta.ajax(api.send_msg, function(res){
									if( res.isError == 0 ){
										ot(f);
										document.querySelector('.pwdbox').style.display = 'none';
										pwdbox = true;
									}
								},{data:{type:4, mobile:phone.value}})
							}else{
								f.reset();
							}
						});
					}else{
						mui.toast(res.msg);
						f.reset();
					}

				},{data:{type:1, mobile:phone.value}},function(){
					f.reset();
				});
				
			}else{
				mui.toast('手机号有误');
			}
		});
	   //绑定
	   document.querySelector('#register').addEventListener('tap', function(){
	   		if( !pwdbox  ){
	   			if( pwd.value == '' || pwd.value.length < 6 ){
	   				mui.toast("密码有误");
	   				return;
	   			}
	   		}
	   		if(  check.phone(phone.value) && code.value != '' ){
	   			bexta.ajax(api.third_login, function(res){
	   				bexta.setStorage(USER, res);
	   				mui.toast("绑定成功")
	   				setTimeout(function(){
	   					bexta.goWebview();
	   				},800);
	   			}, {data:{type:user.id, third_key:user.userInfo.openid, mobile:phone.value, password:pwd.value,code:code.value,nickname:user.userInfo.nickname, head_img:user.userInfo.headimgurl}});
	   		}
	   });
	   
	});
</script>